<!-- @format -->

<!--用户管理-->
<template>
	<div class="page-container">
		<ex_super_table_page v-bind="option" ref="superTablePage"> </ex_super_table_page>

		<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="880px" height="200px" :close-on-click-modal="false">
			<el-form ref="formEl" :model="formValue" :rules="rules" label-width="150px" class="common-form-panel-div" style="padding: 0px 10px;">
				<!--        <ex_header_spiler :title="$tt('label_base_info')"></ex_header_spiler>-->
				<el-row>
					<el-col>
						<el-form-item :label="$tt('label_current_agent')">
							{{ $loginUser.companyName }}
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col>
						<el-form-item :label="$tt('label_fms_account_cmp_as_customer')" prop="companyId">
							<common_customer_choose
								v-model="formValue.companyId"
								:currentLabel="formValue.companyId ? $formatNameCode(formValue.companyName, formValue.companyCode) : null"
								@changeItem="changeCustomer"
								style="width: 100%;"
								:disabled="formValue.id !== '' && formValue.id !== null && formValue.id !== undefined"
							>
							</common_customer_choose>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col>
						<el-form-item label="登陆账号" prop="loginId">
							<el-input v-model="formValue.loginId" :disabled="editModel"></el-input>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="手机号" prop="mobile">
							<el-input v-model="formValue.mobile"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col>
						<el-form-item :label="$tt('label_name')" prop="name">
							<el-input v-model="formValue.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item :label="$tt('label_mailbox')" prop="email">
							<el-input v-model="formValue.email"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">{{ $tt('label_cancel') }}</el-button>
				<el-button type="primary" @click="submitForm">{{ $tt('label_confirm') }}</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	title: 'title_customer_login_account_manage',
	components: {},

	data() {
		let _this = this;

		return {
			formModel: 'insert/update',

			userTypeArr: [
				{ id: 'ADMIN', name: '管理员' },
				{ id: 'OPERATOR', name: '操作员' },
			],
			roleSystemArr: [
				{ id: 'WMS', name: 'WMS' },
				{ id: 'TMS', name: 'TMS 运输系统' },
				{ id: 'OMS', name: '业务后台系统' },
			],
			roleSystemMap: {},

			dialogFormVisible: false,
			dialogTitle: '',
			formValue: {},
			rules: {
				companyId: [
					{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
					{ min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' },
				],
				loginId: [
					{ required: true, message: '请输入登录账号', trigger: 'blur' },
					{ min: 3, max: 32, message: '请输入登录账号', trigger: 'blur' },
				],
				mobile: [
					{ required: false, message: '请输入手机号', trigger: 'blur' },
					{ min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' },
				],
				name: [
					{ required: true, message: this.$tt('tip_can_no_empty'), trigger: 'blur' },
					{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' },
				],
			},

			customerArr: [],
			customerMap: {},

			editModel: false,
		};
	},

	watch: {
		'formValue.companyId'(val, old) {},
		dialogFormVisible(val, old) {
			if (!val) {
				// this.$refs.formEl.resetFields();
				this.formValue = {};
			}
		},
	},

	created() {
		let _this = this;

		_this.roleSystemMap = {};
		_this.roleSystemArr.forEach((e) => {
			_this.roleSystemMap[e.id] = e.name;
		});

		_this.$ajax({
			url: '/ums-api/customer/CustomerCompanyRpc/queryCustomer.json',
			success: (res) => {
				if (res && res.data && res.data.rows) {
					_this.customerArr = res.data.rows;
					let customerMap = {};
					_this.customerArr.forEach((e) => {
						customerMap[e.customerId] = e;
					});
					_this.customerMap = customerMap;
				}
			},
		});

		_this.option = {
			search: {
				model: [
					{
						label: 'label_keyword',
						key: 'keyword',
						attrs: {
							placeholder: { _key: ['label_login_account', 'label_user_name', 'label_user_short_name', 'label_phone_number'], separate: '/' },
						},
						inputStyle: { width: '400px' },
					},
					{ label: 'label_customer', key: 'customerIds', type: 'common_customer_choose', attrs: { multiple: true } },
					{
						label: 'label_status',
						key: 'status',
						type: 'select',
						enum: 'UserStatusEnum',
					},
				],
			},
			action: [
				{
					label: 'label_add_customer_account',
					attrs: { icon: 'el-icon-plus' },
					auth: 'ums_customer_account_edit',
					click: () => {
						this.dialogTitle = this.$tt('label_add_customer_account');
						this.dialogFormVisible = true;
						this.editModel = false;
					},
				},
			],

			table: {
				url: '/ums-api/customer/CustomerUserInfoRpc/list.json',
				attrs: {
					'cell-style': ({ row, column, rowIndex, columnIndex }) => {
						if (column.property == 'status') {
							return { color: row.status == 'NORMAL' ? this.$globalCss.successColor : this.$globalCss.infoColor };
						}
					},
				},
				model: [
					{ key: 'loginId', label: 'label_login_account', align: 'left' },
					{ key: 'name', label: 'label_user_name', align: 'left' },
					{ key: 'companyName', label: '所属客户', align: 'left' },
					{ key: 'companyCode', label: '客户编码', align: 'left' },
					{ key: 'mobile', label: 'label_phone_number', align: 'left', width: 120 },
					{
						key: 'status',
						label: 'label_status',
						width: 120,
						attrs: {
							formatter: (r, c, v, i) => {
								return this.$enumShow(v, 'UserStatusEnum');
							},
						},
					},
					{
						key: 'gmtCreate',
						label: 'label_create_time',
						attrs: {
							formatter: (r, c, v, i) => {
								return this.$dateFormat(v);
							},
						},
					},
					{
						type: 'operate',
						width: 220,
						operate: [
							{
								label: 'label_reset_password',
								auth: 'ums_customer_account_reset_password',
								type: 'confirm-button',
								message: 'tip_reset_password_confirm',
								url: '/ums-api/customer/CustomerUserInfoRpc/resetPwd.json',
								params: (v) => {
									return { id: v.id };
								},
								done: [
									'tip',
									(row, i, data, res) => {
										this.afterPwdReset(res);
									},
								],
							},
							{
								label: 'label_freeze',
								auth: 'ums_customer_account_disable',
								type: 'confirm-button',
								message: 'tip_freeze_user_confirm',
                buttonClass: 'button_text_warning',
								confirmButtonType: 'warning',
								url: '/ums-api/customer/CustomerUserInfoRpc/freeze.json',
								if: (row) => {
									return row.status === 'NORMAL';
								},
								params: (v) => {
									return { id: v.id, type: 'freeze' };
								},
								done: ['reload', 'tip'],
							},
							{
								label: 'label_unfreeze',
								auth: 'ums_customer_account_disable',
								type: 'confirm-button',
								message: 'tip_unfreeze_user_confirm',
								url: '/ums-api/customer/CustomerUserInfoRpc/freeze.json',
								if: (row) => {
									return row.status === 'FORBIDDEN';
								},
								params: (v) => {
									return { id: v.id, type: 'unfreeze' };
								},
								done: ['reload', 'tip'],
							},
							{
								if: (row) => {
									return row.status === 'NORMAL';
								},
								auth: 'ums_customer_account_edit',
								label: 'label_edit',
								click: (row) => {
									// delete row.roleInfos
									this.formValue = JSON.parse(JSON.stringify(row));
									this.dialogFormVisible = true;
									this.editModel = true;
								},
							},
							// ,
							// {
							//   label: '删除', type: "confirm-button", url: '/ums-api/customer/CustomerUserInfoRpc/remove.json', message: '确定要删除该记录吗？',
							//   params: (v) => { return { id: v.id } }, done: ['reload', 'tip']
							// }
						],
					},
				],
			},
		};
	},

	props: {},

	destroyed() {},

	methods: {
		changeCustomer(e) {
			if (e) {
				this.$set(this.formValue, 'companyId', e.customerId);
				this.$set(this.formValue, 'companyName', e.customerName);
				this.$set(this.formValue, 'companyCode', e.customerCode);
			}
		},
		afterPwdReset(res) {
			const h = this.$createElement;
			let id = 'pwdMsgbox';
			this.$msgbox({
				title: this.$t('label_tip'),
				type: 'success',
				message: h('div', { attrs: { id } }, [
					h('div', { class: 'flex_row_wrap_center' }, [h('div', { class: 'mg_r1', style: 'font-size:15px;font-weight: bold;' }, [res.data.loginId]), this.$t('tip_password_reset_success')]),
					h('div', { class: 'flex_row_wrap_center' }, [
						this.$t('tip_new_password_is'),
						h('div', { class: 'mg_h1', style: 'font-size:15px;font-weight: bold;' }, [res.data.pwd]),
						h('el-button', { props: { size: 'mini', type: 'text' }, on: { click: (e) => this.$copyToClip(res.data.pwd, this.$t('label_has_copy'), id) } }, [this.$t('label_copy_password')]),
					]),
				]),
			})
				.then(() => {})
				.catch((e) => {});
		},

		submitForm() {
			this.$refs['formEl'].validate((valid) => {
				if (valid) {
					let customerCompany = this.customerMap[this.formValue.companyId];
					if (customerCompany) {
						this.formValue.companyCode = customerCompany.customerCode;
						this.formValue.companyName = customerCompany.customerName;
					}

					this.$ajax({
						url: '/ums-api/customer/CustomerUserInfoRpc/saveUpdate.json',
						type: 'json',
						data: this.formValue,
						success: (res) => {
							if (res.data) {
								this.$alert(
									this.$tt('tip_account_new_password_new_success', {
										account: res.data.loginId,
										password: res.data.pwd,
									})
								);
							} else {
								this.$message({
									showClose: true,
									message: this.$tt('tip_submit_success'),
									type: 'success',
								});
							}
							this.$refs['superTablePage'].reload();
							this.dialogFormVisible = false;
						},
					});
				} else {
					return false;
				}
			});
		},
	},
};
</script>
<style>
.small-btn span {
	font-size: 14px;
}

.small-btn .el-button--small span {
	font-size: 14px;
}
</style>
